<template>
  <div class="app-container">
      <el-card>
      <el-form :model="companyparams"
               ref="companyForm"
               label-width="80px"
               inline
               size="normal">
        <el-form-item label="标签"
                      prop="tags">
          <el-input clearable
                    v-model="companyparams.tags"></el-input>
        </el-form-item>
        <el-form-item label="城市"
                      prop="province">
          <div style="width:205px">
            <el-select v-model="companyparams.province"
                       placeholder="请选择"
                       @change="getCitys">
              <el-option v-for="(item,index) in provincesList"
                         :key="index"
                         :label="item"
                         :value="item">
              </el-option>
            </el-select>
          </div>
        </el-form-item>

        <el-form-item label="地区"
                      prop="city">
          <el-select v-model="companyparams.city"
                     placeholder="请选择">
            <el-option v-for="(item,index) in citysList"
                       :key="index"
                       :label="item"
                       :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="企业简称"
                      prop="shortName">
          <el-input clearable
                    v-model="companyparams.shortName"></el-input>
        </el-form-item>
        <el-form-item label="状态"
                      prop="state">
          <el-input clearable
                    v-model="companyparams.state"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="resetForm">清除</el-button>
          <el-button type="primary"
                     @click="loadCompanyList">搜索</el-button>
          <el-button type="success"
                     @click="UserShow=true">新增用户</el-button>
        </el-form-item>
      </el-form>

      <!-- 警告提示 -->
      <el-alert :title="`数据一共${count}条`"
                show-icon
                center
                :closable="false"
                type="info">
      </el-alert>
      <br>

      <!-- 表单 -->
      <el-table :data="companyList">
        <el-table-column prop="id"
                         label="序号">
        </el-table-column>
        <el-table-column prop="number"
                         label="企业编号">
        </el-table-column>
        <el-table-column prop="company"
                         label="企业简称">
        </el-table-column>
        <el-table-column prop="tags"
                         label="标签">
        </el-table-column>
        <el-table-column prop="username"
                         label="创建者">
        </el-table-column>
        <el-table-column prop="addDate"
                         label="创建日期">
          <template slot-scope="scope">
            {{scope.row.addDate | timeFormat}}
          </template>
        </el-table-column>
        <el-table-column prop="remarks"
                         label="备注">
        </el-table-column>
        <el-table-column prop="state"
                         label="状态">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.state===0"
                    type="warning">禁止</el-tag>
            <el-tag v-if="scope.row.state===1"
                    type="success">启用</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="primary"
                       size="mini"
                       plain
                       icon="el-icon-view"
                       @click="editCompanyInfo(scope.row)"
                       circle></el-button>
            <el-button type="success"
                       size="mini"
                       plain
                       @click="changeState(scope.row)"
                       icon="el-icon-edit"
                       circle></el-button>
            <el-button type="danger"
                       size="mini"
                       plain
                       @click="delCompany(scope.row)"
                       icon="el-icon-delete"
                       circle></el-button>
          </template>

        </el-table-column>
      </el-table>

      <!-- 分页器 -->
      <el-pagination @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page="companyparams.page"
                     :page-sizes="[2, 5, 10, 20]"
                     :page-size="companyparams.pagesize"
                     background
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="count">
      </el-pagination>

      <!-- 弹出层 -->
      <el-dialog :title="companyInfo.id? '修改公司信息': '新增公司'"
                 v-if="UserShow"
                 :visible.sync="UserShow"
                 width="50%"
                 @close="closeCompanyForm">
        <companys-add v-model="companyInfo"
                      @close="closeCompanyForm"
                      v-if="UserShow"></companys-add>
      </el-dialog>

    </el-card>
  </div>
</template>

<script>
import { list as companylist, disabled, remove } from '@/api/hmmm/companys'
import { provinces, citys } from '@/api/hmmm/citys'
import companysAdd from '../components/companys-add.vue'
export default {
  components: { companysAdd },
  name: 'CompanysList',
  data() {
    return {
      companyparams: {
        page: 1,
        pagesize: 2,
        tags: null,
        province: null,
        city: null,
        shortName: null,
        state: null
      },
      companyList: [],
      count: null,
      provincesList: provinces(),
      citysList: [],
      UserShow: false,
      companyInfo: {}
    }
  },
  created() {
    this.loadCompanyList()
  },
  methods: {
    async loadCompanyList() {
      try {
        let { data: res } = await companylist(this.companyparams)
        this.companyList = res.items
        this.count = res.counts
      } catch (error) {}
    },
    resetForm() {
      this.$refs.companyForm.resetFields()
      this.companyparams.page = 1
      this.loadCompanyList()
    },
    // 获取市内区域列表
    getCitys(val) {
      console.log(val)
      this.citysList = citys(val)
    },
    handleSizeChange(val) {
      this.companyparams.pagesize = val
      this.loadCompanyList()
    },
    handleCurrentChange(val) {
      this.companyparams.page = val
      this.loadCompanyList()
    },
    editCompanyInfo(val) {
      //   this.$nextTick(() => {
      //     this.companyInfo = val
      //   })
      this.companyInfo = val
      console.log(this.companyInfo)
      this.UserShow = true
    },
    closeCompanyForm() {
      this.UserShow = false
      this.companyInfo = {}
      this.loadCompanyList()
    },
    changeState(val) {
      this.$confirm('此操作将会修改该公司状态, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          try {
            val.state = val.state === 1 ? 0 : 1
            await disabled(val)
            this.loadCompanyList()
            this.$message.success('修改用户状态成功')
          } catch (error) {
            console.log(error)
          }
        })
        .catch(() => {
          this.$message.error('修改用户状态失败')
        })
    },
    async delCompany(val) {
      this.$confirm('此操作将会删除该公司, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          try {
            await remove(val)
            if (this.companyparams.page !== 1 && this.companyList.length == 1) {
              this.companyparams.page--
            }
            this.loadCompanyList()
            this.$message.success('删除公司成功')
          } catch (error) {
            console.log(error)
          }
        })
        .catch(() => {
          this.$message.error('删除公司失败')
        })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
